<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>楼宇列表</span>
            </div>
        </template>
        <!-- 搜索-->
        <el-form inline>
            <el-form-item label="楼宇名称">
                <el-input v-model="name" placeholder="请输入楼宇名称"/>
            </el-form-item>
            <el-form-item label="楼宇层数">
                <el-input v-model="numberOfFloor" placeholder="请输入楼宇层数"/>
            </el-form-item>
            <el-button type="success" @click="addData">添加</el-button>
            <el-form-item>

                <el-button type="primary" @click="searchData"><el-icon class="sc"><Search/></el-icon>搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData">
            <el-table-column type="index" label="编号" width="80"/>
            <el-table-column prop="name" label="楼宇名称"/>
            <el-table-column prop="address" label="楼宇位置"/>
            <el-table-column prop="numberOfFloor" label="楼层数量"/>
            <el-table-column prop="creatTime" label="创建时间" :formatter="dateFormat"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="warning" @click="edit(scope)">编辑</el-button>
                    <el-button @click="deleteItem(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="demo-pagination-block">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[5, 10,15, 20]"
                        :small="small"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </template>

    </el-card>
<!--抽屉-->
    <el-drawer
        v-model="isShow"
        :title="title"
        :direction="direction"
    >
        <el-form :model="buildingData">
            <el-form-item label="楼宇名称">
                <el-input v-model="buildingData.name"/>
            </el-form-item>
            <el-form-item label="楼宇位置">
                <el-input v-model="buildingData.address"/>
            </el-form-item>
            <el-form-item label="楼层数量">
                <el-input v-model="buildingData.numberOfFloor"/>
            </el-form-item>
            <el-button type="primary" @click="submitData">{{ title }}</el-button>
        </el-form>
    </el-drawer>


</template>

<script>
import dayjs from "dayjs";
import * as buildingAPI from "@/api/building.js"
import {Search} from "@element-plus/icons-vue";
import {handleCurrentChange} from "element-plus/es/components/tree/src/model/util";

export default {
    data() {
        return {
//分页参数显示
            isShow:false,
            title:"添加楼宇",
            currentPage: 1,
            pageSize: 10,
            total: 0,
            name: "",
            numberOfFloor: "",
            tableData: [],
            buildingData:{}

        }
    },
    methods: {
        handleSizeChange() {
            this.loadBuildingList()
        },

        handleCurrentChange() {
            this.loadBuildingList()
        },
        //点击搜索按钮，触发条件搜索
        searchData(){
            this.loadBuildingList()
        },
        dateFormat(a,b,c,d){
            return dayjs(c).format("YYYY-MM-DD hh:mm:ss")
        },
        addData(){
            this.isShow=true
            this.title="添加楼宇"
            this.buildingData={}
          // this.$router.push("/AddBuildingList")
        },
        edit(row){
            this.isShow=true
            this.title="编辑楼宇"
            this.buildingData=row
            // this.$router.push(`/AddBuildingList?id=${a.id}&name=${a.name}`)
        },
        submitData(){
        if(this.title=="添加楼宇"){
             buildingAPI.addBuilding(this.buildingData).then((res)=>{
                 if(res.data==200){
                     this.isShow=false
                 }
             })
        }else {
            buildingAPI.updateBuilding(this.buildingData).then((res)=>{
                if(res.data==200){
                    this.isShow=false
                }
            })
        }
        },
        //点击删除按钮，触发删除操作
        deleteItem(id){

        buildingAPI.deleteBuildingList({id:id}).then(res=>{
            if(res.data.code==200){
                this.loadBuildingList()
            }
        })
        },
        async loadBuildingList() {
            let res = await buildingAPI.getBuildingList({
                currentPage:this.currentPage,
                pageSize:this.pageSize,
                name:this.name,
                numberOfFloor:this.numberOfFloor
            });
            if(res.data.code==200){
              this.tableData=res.data.data
                this.total=res.data.total
            }
            this.tableData = res.data.data;
        }
    },
    components: {
        Search
    },
    //在组件创建并初始化完成后执行的生命周期函数
    created() {
        this.loadBuildingList()
    },

};
</script>

<style scoped>
.box-card {
    width: 100%;
    height: 100%;
}

.sc {
    margin-right: 5px;
}
</style>
